<template>
    <!-- 顶部header区域 -->
  <div class="index-wrap">


    <swiper :lunbotuList="lunbotuList"></swiper>
  <!-- <mt-swipe :auto="4000"> -->
      <!-- 中间的路由router-view区域 -->
  <!-- <mt-swipe-item  v-for="item in lunbotuList"  :key="item. img">
     <img  :src="item.img" alt="">
     </mt-swipe-item>
</mt-swipe> -->
<ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <router-link to="/box/xinwei" >
		                    <img src="../assets/images/menu1.png" alt="">
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/box/tupian" >
		                       <img src="../assets/images/menu2.png" alt="">
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/box/shengpin" >
		                    <img src="../assets/images/menu3.png" alt="">
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/box/liuyan" >
		                      <img src="../assets/images/menu4.png" alt="">
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/shipin" >
		                    <img src="../assets/images/menu5.png" alt="">
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/lianxi" >
		                      <img src="../assets/images/menu6.png" alt="">
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		        </ul> 
      <!-- <index></index> -->
      <!-- 底部tabbae区域 -->
      
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Header} from "mint-ui";
import { Swipe, SwipeItem } from 'mint-ui';
import swiper from './iditem/swiper.vue'
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
import   Vue from 'vue'
// import   index  from '@/components/index/index'
import  axiox from 'axios'
import  VueResource from 'vue-resource'
Vue.use(VueResource)

export default {
  name: 'box',
   data(){
     return {
         lunbotuList:[]
     };
   },
   created(){
   this. getLunbotu();
 },
   methods: {
      getLunbotu(){
          this.$http.get('getlunbo'). then(result => {
              // console.log(result.body)
              if(result.body .status ===0){
                // 成功了
                Toast('加载轮播图ok。。。')
                this.lunbotuList =result.body.message;
              }else{
            //  失败了
            Toast('加载轮播图失败')
              }
          })
      }
   },
  
   components:{
     swiper 
   }
}
</script>
<style  lang="scss"  scoped>
.mint-swipe{
  height:200px;
      .mint-swipe-item{
        background: red;
      img{ 
        width:100%;
        height:100%;
         }
      }
}
.mui-grid-view.mui-grid-9 {
  background: #ffffff;
  border: none;
   img{ 
       width:60px;
       height:60px;
   }
}
</style>
